<template>
  <div class="container">
    <div class="top" @click="back">
      管理 >> <span>比赛安排</span>
    </div>
    <div class="form">
      <el-tag>发布比赛</el-tag>
      <div style="width: 500px;">
        <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="报名截止日期" prop="endTime">
           <el-date-picker
        v-model="form.endTime"
        type="date"
        placeholder="Pick a day"
        size="default"
      />
          </el-form-item>
          <el-form-item style="transform: translateY(30px)">
            <el-button type="primary" @click="submitForm(formRef)">
              Create
            </el-button>
            <el-button @click="resetForm(formRef)">Reset</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
    <div class="table">
      <el-tag>往期比赛</el-tag>
      <div style="width: 700px;">
        <el-table ref="tableRef" row-key="date" :data="tableData[0]" style="width: 100%">
          <el-table-column
              prop="endTime"
              label="截止日期"
              sortable
              width="180"
              column-key="date"
          />
          <el-table-column prop="name" label="名称" width="180"/>


          <el-table-column
              prop="status"
              label="状态"
              width="100"
              :filters="[
        { text: '进行中', value: 1 },
        { text: '已结束', value: 0 },
      ]"
              filter-placement="bottom-end"
          >
            <template #default="scope">
              <el-tag
                  :type="scope.row.status === 1 ? '' : 'success'"
                  disable-transitions
              >{{ scope.row.status == 1 ? '进行中' : '已结束' }}
              </el-tag
              >
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.$index)"
              >
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
    <span>
     确认删除吗？？？
    </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirm">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {reactive, inject, ref, onMounted} from "vue";
import {useRouter} from "vue-router";

const centerDialogVisible = ref(false)

const id = ref(0)
const confirm = () => {

    axios.get('competition/delete?id=' + id.value).then(res => {
      window.location.reload()
    })

  centerDialogVisible.value = false
}
const router = useRouter()
const back = () => router.push('/manage')
const axios = inject("$axios")
const form = reactive({
  name: "",
  endTime: ''
})

const tableData = reactive([[]])
onMounted(() => {
  axios.get("competition").then(res => {
    tableData[0] = res.data
  })
})
const formRef = ref()
const rules = reactive({
  name: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  category: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  endTime: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
})
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      form.endTime = new Date(form.endTime)
      axios.post("competition", form).then(res => {

        ElMessage({
          showClose: true,
          message: res.data,
          type: 'success',
        })
        setTimeout(() => {
         window.location.reload()
        }, 1000)
      })
    } else {

    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const deleteRow = (e) => {
  centerDialogVisible.value = true
  id.value = tableData[0][e].id
}


</script>

<style scoped lang="less">
.container {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto;
  padding-bottom: 20px;

  .top {
    font-size: 14px;
    color: #A8ABB2;
    margin: 20px;

    span {
      color: #409EFF;
    }
  }

  .form, .table {
    width: 90%;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-bottom: 20px;
    min-height: 200px;
  }
}
</style>